import React, { useState, useEffect } from 'react';
import { List, Space, Typography, Dropdown, Menu } from 'antd';
import { MoreOutlined, AppstoreOutlined, BarsOutlined, CaretUpOutlined } from '@ant-design/icons';
import styles from './textFile.module.less';

const { Text, Title } = Typography;

const TextFile = () => {
  const [textFiles, setTextFiles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [viewMode, setViewMode] = useState('grid'); // 'grid' 或 'list'

  // 获取文本文件列表
  const fetchTextFiles = async () => {
    setLoading(true);
    try {
      // 模拟API调用获取文件列表
      const mockFiles = [
        {
          id: 1,
          name: '文件名1.fig',
          size: '2 GB',
          updateTime: '2023.11.17 11:11',
          type: 'figma',
          icon: '/icons/figma.png'
        },
        {
          id: 2,
          name: '文件名2.sketch',
          size: '2 GB',
          updateTime: '2023.11.17 11:11',
          type: 'sketch',
          icon: '/icons/sketch.png'
        },
        {
          id: 3,
          name: '文件名3.xd',
          size: '900 MB',
          updateTime: '2023.11.17 11:11',
          type: 'xd',
          icon: '/icons/xd.png'
        },
        {
          id: 4,
          name: '文件名4.pdf',
          size: '1.5 GB',
          updateTime: '2023.11.17 11:11',
          type: 'pdf',
          icon: '/icons/pdf.png'
        },
        {
          id: 5,
          name: '文件名5.ai',
          size: '1.5 GB',
          updateTime: '2023.11.17 11:11',
          type: 'ai',
          icon: '/icons/ai.png'
        },
        // ... 其他文件
      ];
      setTextFiles(mockFiles);
    } catch (error) {
      console.error('获取文本文件失败:', error);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchTextFiles();
  }, []);

  // 文件操作菜单
  const actionMenu = (
    <Menu>
      <Menu.Item key="download">下载</Menu.Item>
      <Menu.Item key="rename">重命名</Menu.Item>
      <Menu.Item key="delete" danger>删除</Menu.Item>
    </Menu>
  );

  const headerActions = (
    <Space>
      <Text>名称</Text>
      <CaretUpOutlined />
      <AppstoreOutlined
        className={viewMode === 'grid' ? styles.activeViewMode : ''}
        onClick={() => setViewMode('grid')}
      />
      <BarsOutlined
        className={viewMode === 'list' ? styles.activeViewMode : ''}
        onClick={() => setViewMode('list')}
      />
    </Space>
  );

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Title level={4}>文件</Title>
        <Text type="secondary">总计: 12GB</Text>
        {headerActions}
      </div>

      <List
        grid={viewMode === 'grid' ? { gutter: 16, column: 4 } : null}
        dataSource={textFiles}
        loading={loading}
        className={styles.fileList}
        renderItem={file => (
          <List.Item className={styles.fileItem}>
            <div className={styles.fileCard}>
              <img src={file.icon} alt={file.type} className={styles.fileIcon} />
              <div className={styles.fileInfo}>
                <Text className={styles.fileName}>{file.name}</Text>
                <Text type="secondary" className={styles.fileDate}>{file.updateTime}</Text>
                <Text type="secondary" className={styles.fileSize}>{file.size}</Text>
              </div>
              <Dropdown overlay={actionMenu} placement="bottomRight" trigger={['click']}>
                <MoreOutlined className={styles.moreAction} />
              </Dropdown>
            </div>
          </List.Item>
        )}
      />
    </div>
  );
};

export default TextFile;
